<template>
  <div class="login-form">
    <a-spin :spinning="loading" tip="数据加载中……" :delay="300">
      <div class="title">
        <router-link to="/home">
          <div class="lala-logo"></div>
        </router-link>
      </div>
      <div class="form-wrap">
        <a-form
          ref="ruleForm"
          :model="formData"
          :label-col="formLayout.labelCol"
          :wrapper-col="formLayout.wrapperCol"
          :rules="rules"
          @finish="loginHandler"
          :colon="false"
        >
          <a-form-item label="用户名" name="username">
            <a-input
              v-model:value="formData.username"
              placeholder="请输入用户名"
            />
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input
              type="password"
              v-model:value="formData.password"
              autocomplete="on"
              placeholder="请输入密码"
            />
          </a-form-item>
          <a-form-item label="验证码" name="code">
            <div>
              <a-input
                v-model:value="formData.code"
                placeholder="请输入验证码"
              />
            </div>
          </a-form-item>
          <div class="info-btn">
            <a href="javascript:;" target="_blank" class="platformUrl">
              后台入口
            </a>
            <router-link to="/home">
              立即注册
            </router-link>
          </div>
          <div class="login-btn">
            <a-button
              type="primary"
              style="width: 100%"
              block
              html-type="submit"
            >
              登 录
            </a-button>
          </div>
        </a-form>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { IStore } from '@/store'
import request from '@/utils/http'
//import JSEncrypt from 'jsencrypt/bin/jsencrypt'
//import { message } from 'ant-design-vue'
import { useForm } from '@ant-design-vue/use'
// eslint-disable-next-line @typescript-eslint/class-name-casing
interface dataList {
  username: string
  password: string
  code: string
  img: string
}
// eslint-disable-next-line @typescript-eslint/class-name-casing
interface dataLayout {
  labelCol: any
  wrapperCol: any
}
// eslint-disable-next-line @typescript-eslint/class-name-casing
interface ICommonData {
  status?: number | string
  data?: any
  message?: string
}

interface ICodeData {
  img: string
  key: string
  publicKey: string
}
export default defineComponent({
  name: 'Product',
  setup() {
    const store = useStore<IStore>()
    //login状态
    const loading = computed(() => store.state.loading)
    //表单定义
    const formData = reactive<dataList>({
      username: '',
      password: '',
      code: '',
      img: ''
    })
    //表单样式定义
    const formLayout = reactive<dataLayout>({
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 6
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 18
        }
      }
    })
    //校验规则
    const rules = reactive({
      username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        {
          pattern: /^[^\s]+$/g,
          message: '用户名不能包含空格',
          trigger: 'blur'
        }
      ],
      password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
      code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
    })
    //获取登陆验证码
    interface IGetCode extends ICommonData, ICodeData {}
    const apiGetCode = async (): Promise<IGetCode> => {
      try {
        const data = await request.post<IGetCode>('url', {})
        if (data.status === 200) {
          formData.img = data.img
        }
        return data
      } catch (error) {
        throw Error(error)
      }
    }
    onMounted(() => {
      apiGetCode()
    })
    //点击登陆
    const { resetFields, validate, validateInfos } = useForm(formData, rules)
    const loginHandler = () => {
      validate().then(async () => {
        resetFields()
        console.log('values', formData)
      })
    }
    return {
      loading,
      formData,
      formLayout,
      rules,
      validateInfos,
      loginHandler
    }
  }
})
</script>

<style scoped lang="less">
/* @import url(); 引入css类 */
.platformUrl {
  color: #4474fa;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  float: left;
  line-height: 40px;
}
.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  overflow: hidden;
  margin: auto auto;
  background-color: white;
  border-radius: 4px;
  padding: 0 30px 30px 30px;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: center;
    .lala-logo {
      background: url('../../../assets/images/lala-logo.png');
      height: 150px;
      width: 150px;
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .form-wrap {
    .info-btn {
      text-align: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .login-btn {
      margin: 10px auto;
      text-align: center;
      .el-button {
        border: none;
        color: #fff;
        font-weight: bold;
        background: #4474fa;
      }
    }
  }
}
</style>
